<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "视频详情");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>
<style type="text/css">
	
	.collection{
		height: 30px;
		padding: 20px 10px;
		color:#2196F3;
		font-size: 19px;
	}
	
	.thecollection{
		border: 1px solid;
		padding:3px 20px;
		
	}
	
	.likethis{
		background-color: #2196F3;
		color:white;
	}
	
	 .videofee{
		padding-right: 20px;
	}
	.color-blue {
		color: #2196F3;
	}
	.color-red{
	 color:red;
	}
	.bottom-btn {
		margin: 15px;
		padding: 10px;
		background-color: #2196F3;
		
	}
	.bottom-lab {
		position: fixed;
		bottom: 0;
		background: #fff;
		width: 100%;
		text-align: center;
		font-weight: 700;
		
	}
	.bottom-lab>div {
		margin-bottom: 15px;
	}
	.weui-btn_primary:not(.weui-btn_disabled):active{
		background-color: #2196F3;
	}
		
	.like{
		float: right;
		font-size: 0.7rem;
	}
	
	.videodescription{
		padding:10px 20px;
		border-bottom: 4px solid #eee; 
		color: #afafaf;
	}
	
	.videodescription>div{
		padding:6px
	}
	.videodescription>div>p{
		margin-top: 5px;
	}
	.videodescription>div>img{
	margin-top:10px;
		height: 80px;
	}
	.videotitle{
		color: black;
	}
	
	.aboutother{
		padding: 20px 10px;
		font-size: 20px;
		color:#afafaf;
		border-bottom: 3px solid #eee; 
	}
	.msg{
		text-align: center;
		margin: 20px 0px;
		color:#afafaf;
	}

	.totalhide{
		overflow:hidden;
		text-overflow:ellipsis;	
		display:-webkit-box;
		-webkit-box-orient: vertical;	
	}
	.titlehide{
		-webkit-line-clamp: 1;
	}
	.smallimg{
		width: 5.5rem;
	}
	.coverBox{
		position:relative;
	}
	.playBtn{
		position:absolute;
		width:3.0rem;
		height:3.0rem;
		left:0;
		top:0;
	}
</style>
<%@ include file="/WEB-INF/views/shared/master/weTitle.jsp"%>
<input type="hidden" id="id" value="${course.id}" data-type="videoType"/>
<input type="hidden" id="fromWhere" value="${fromWhere}"/>
<input type="hidden" id="courceThumbnailId" value="${course.courceThumbnailId}"/>
<input type="hidden" class="forTab" value="${forTab}"/>

	<div>
		<c:if test="${course.courcePathId!=null && course.courcePathId!=''}">
			<video class="videoShow" src="${tfn:getFileUrl(course.courcePathId)}" controls="controls" style="width: 100%">
			your browser does not support the video tag
			</video>
		</c:if>
		<c:if test="${course.courcePathId ==null || course.courcePathId==''}">
			<video class="videoShow"  src="<c:url value="/files/test/a.mp4" />" controls="controls" style="width: 100%">
			your browser does not support the video tag
			</video>
		</c:if>
	</div>
	<div class="coverBox">
		<%-- <c:if test="${course.courceThumbnailId!=null && course.courceThumbnailId!=''}">
			<img class="imgshow" src="${tfn:getFileUrl(course.courceThumbnailId)}" /> 	
		</c:if>
		<c:if test="${course.courceThumbnailId ==null || course.courceThumbnailId==''}">
			<img class="imgshow"  src="<c:url value='/images/we/cloudSharing/videoshow1.jpg'/>" />
		</c:if> --%>
		<c:if test="${course.courceThumbnailId!=null && course.courceThumbnailId!=''}">
			<img class="imgshow" src="${tfn:getFileUrl(course.courceThumbnailId)}" /> 	
		</c:if>
		
		<img class="playBtn" src="<c:url value='/images/we/cloudSharing/play.png'/>" />
	</div>

<div class="collection">
	<span class="description" style="float: left;"><h3 class="nofee"><span class="videofee">${course.courceSellingprice}&nbsp;&nbsp;<t:provider packageName="share" enumClassName="TrainCurrencyState" value="${course.courceSellingCurrency}"/></span><span  class="buy">免费</span></h3></span><%-- ${buy} --%>
	<span class="like thecollection"></span>	
</div>

<div style="width:100%;height:20px;background-color: #ebebeb;margin-top: 10px;"></div>

<div>
	<h3 class="aboutother">课程简介</h3>
	<div class="videodescription">
		<p>${course.courseDescription}</p>
	</div>
</div>	

<div style="width:100%;height:20px;background-color: #ebebeb;"></div>

<div>
	<h3 class="aboutother">热门推荐</h3>
	<div class="msg" >
		<img class=""  src="<c:url value='/images/we/cloudSharing/null.png'/>" />
		<p class="p_msg">${msg}</p>
	</div>
	<div>
		<c:forEach items="${yescourses}" var="yescourse">
			<a href="<c:url value='/wechat/share/videoDetail?key=${yescourse.id}&fromWhere=videoDetail' />">
				<div class="weui-flex videodescription">
					<div class="weui-flex__item " style="flex-grow:1;justify-content: center;align-items:center; " id="test">
						<c:if test="${yescourse.courceThumbnailId!=null && yescourse.courceThumbnailId!=''}">
							<img class="smallimg" src="${tfn:getFileUrl(yescourse.courceThumbnailId)}" style="display: block;"/> 
						</c:if>
						<c:if test="${yescourse.courceThumbnailId ==null || yescourse.courceThumbnailId==''}">
							<img class="smallimg" style="display: block;" src="<c:url value='/images/we/index/WechatIMG8.jpeg' />" />  
						</c:if>
					</div>										
					<div class="weui-flex__item" style="flex-grow:2">
						<p class="videotitle titlehide totalhide">${yescourse.courseTitle} </p>
						<p>导师：${yescourse.courseTeacher}</p>
						<p>
							<span class="videofee">
								<%-- ${yescourse.courceSellingprice}&nbsp;&nbsp;
								<t:provider packageName="share" enumClassName="TrainCurrencyState" value="${yescourse.courceSellingCurrency}"/> --%>
								免费
							</span>
								<span style="float: right;">
								<span class="like">&nbsp;&nbsp;&nbsp;${yescourse.viewTimes.viewtimes}</span>
								<img class="like" style="width:16px;display: block;padding-top:0.2rem " src="<c:url value='/images/we/cloudSharing/eye.png'/>" />								
							</span>							
						</p>
					</div>
				</div>
			</a>
		</c:forEach>					
	</div>
</div>	

<div style="width:100%;height:20px;background-color: #ebebeb;padding-bottom: 90px"></div>

<div class="bottom-lab" style="z-index:500;">
	<a href="javascript:;" class="weui-btn weui-btn_primary bottom-btn">报&nbsp;&nbsp;&nbsp;&nbsp;名</a>
</div>	
	
<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/tabmob.jsp"%>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/javascript">

	$(function(){
		
		if($(".p_msg").html()==""){
			$(".msg").hide();
		}else{
			$(".msg").show();
		}
		
		if($(".buy").html()=="已购买"){
			
			$(".bottom-lab").hide();
			$(".buy").addClass("color-blue");
			
		}else if($(".buy").html()=="未购买"){
			
			$(".bottom-lab").show();
			$(".buy").addClass("color-red");
			
		}else if ($(".buy").html()=="免费") {
			
			$(".nofee").html("免费");
			$(".bottom-lab").hide();
		}
	
	});
	
	//进入显示图片 点击播放视频
	$(function () {
		$(".videoShow").hide();
		$(".imgshow").show();
		$width = $(".videoShow").width();
		$height = $(".videoShow").height();
		$(".coverBox").width($width);
		$(".coverBox").height($height);
		
		$playWidth = $(".playBtn").width();
		$playHeight =$(".playBtn").height();
		
		var playLeft = $width/2 - $playWidth/2;
		var platTop = $height/2 - $playHeight/2;
		
		$(".playBtn").css("left",playLeft);
		$(".playBtn").css("top",platTop);
		
		$(".imgshow").width($width);
		$(".imgshow").height($height);
		
		$(".imgshow").click(function () {
			imgClick();
		});
		
		$(".playBtn").click(function(){
			imgClick();
		});
		
	});
	
	
	
	
	/*监听是否收藏的全局变量*/	
	
	$(function(){
		
		/* 全局变量id和类型 */
		var $input = $("#id");
		var type = $input.data("type");
		var thingId = $input.val();
		
		/*在足迹表中插入一条数据 */
		var action = $.getVirtualPath()+"/wechat/allFootprint/addFootprint?type="+type+"&thingId="+thingId;
		$.getTextPost(action);

		/*根据初始状态展示收藏状态	*/
		var state;
		
		var url = $.getVirtualPath()+"/wechat/allCollect/isCollect?type="+type+"&thingId="+thingId;
		var result = $.getTextPost(url);
		if(result=="true"){
			$(".thecollection").html("已收藏");
			$(".thecollection").addClass("likethis");	
			state = 0;
		}else{
			$(".thecollection").html("+&nbsp;收藏");
			state = 1;
		}
		
		//点击收藏  事件
		$(".thecollection").click(function () {
			
			if(state==0){
				//取消收藏
				var url = $.getVirtualPath()+"/wechat/allCollect/delete?type="+type+"&thingId="+thingId;
				var result = $.getTextPost(url);
				if(result="true"){
					state = 1;
					$(".thecollection").html("+&nbsp;收藏");
					$(".thecollection").removeClass("likethis");
				}else{
					$.toast("取消失败");
					state = 0;
				}
				
			}else if (state==1) {			
				//添加收藏
				var url = $.getVirtualPath()+"/wechat/allCollect/addCollect?type="+type+"&thingId="+thingId;
				var result = $.getTextPost(url);
				if(result="true"){
					state=0;
					$(".thecollection").addClass("likethis");
					$(".thecollection").html("已收藏");
				}else{
					$.toast("收藏失败");
				}
			}
		});	
	});	
	

/* ------------------------------微信分享-------------------------- */	
	$(function () {
		$(".hideimg").hide();
		var $desc ="${course.courseTitle}";
		var $key = "${course.id}";
		var $imgUrl = "";
		
		if($("#courceThumbnailId").val()==null ||$("#courceThumbnailId").val()==""){
			$imgUrl = "http://www.putiyoli.net/ares/images/logo.png";
		}else{
			$imgUrl = "${tfn:getFileUrl(course.courceThumbnailId)}";
		}
		var shareCode = $.getUrlParam('shareCode');
		
		if(!$.isNull(shareCode)){
			return; 
		}
		
		var url=$.getVirtualPath()+"/wechat/cust/personCenter/shareSignature";
		var href=encodeURIComponent(window.location.href);
		console.log(href);
		var resultJson=$.getJsonPost(url,"href="+href);
		console.log(resultJson);
		
		var config={
				debug: false,
			  	appId: resultJson.jsapiSignature.appId,// 公众号的唯一标识
			  	timestamp: resultJson.jsapiSignature.timestamp,// 生成签名的时间戳
			  	nonceStr: resultJson.jsapiSignature.nonceStr,// 生成签名的随机串
			  	signature: resultJson.jsapiSignature.signature,// 签名
			  	jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline']
			}
		
		wx.config(config);
		
		// 微信事件
		wx.ready(function () {
			// 分享朋友
			wx.onMenuShareAppMessage({
			    title: "普天永利-培训",//resultJson.linkName+'的邀请码',
			    desc:  $desc,
			    link:  window.location.href+"?key="+$key+"&fromWhere=cloudSharing",
			    imgUrl: "http://www.putiyoli.net/ares/images/logo.png",
			    success: function () {
					console.log(arguments);
			    },error:function(){
			    }
			});
			
			console.log(config);
			//分享到朋友圈
			wx.onMenuShareTimeline({
				title: "普天永利-培训",
			    link:  window.location.href+"?key="+$key+"&fromWhere=cloudSharing",
			    imgUrl: "http://www.putiyoli.net/ares/images/logo.png",
				success: function (res) {
				}
			});

			// 微信错误处理机制
			wx.error(function (res) {
				console.log(res.errMsg);
			});
			
		});	
	})
	function goback(){
		var fromWhere = $("#fromWhere").val();
		var forTab = $(".forTab").val();
		if(fromWhere=="cloudSharing"){
			window.location.href=$.getVirtualPath()+"/wechat/share/cloudSharing?forTab="+forTab;
		}else if(fromWhere=="collectIndex"){
			window.location.href=$.getVirtualPath()+"/wechat/cust/colAndFoot/collectIndex";
		}else if(fromWhere=="videoDetail"||fromWhere=="morevideo"){
			window.history.go(-1);
		}
	}
	
	function imgClick(){
		$(".imgshow").hide();
		$(".playBtn").hide();
		$(".videoShow").show();
		$(".videoShow").get(0).play();
	}
</script>
